﻿<xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:import href="jquery.xslt" />

  <!-- CSS -->

  <xsl:template match="ui-accordion" mode="css">
    <xsl:call-template name="jquery-ui-css" />
    <xsl:apply-templates mode="css" />
  </xsl:template>

  <!-- main -->

  <xsl:template match="ui-accordion">
    <div id="{@id}">
      <xsl:apply-templates select="ui-accordion-group" />
    </div>
  </xsl:template>

  <xsl:template match="ui-accordion-group">
    <h3>
      <a href="#">
        <xsl:value-of select="@title" />
      </a>
    </h3>
    <div>
      <ol>
        <xsl:apply-templates select="ui-accordion-item" />
      </ol>
    </div>
  </xsl:template>

  <xsl:template match="ui-accordion-item">
    <li>
      <a id="{@id}" href="#">
        <xsl:value-of select="@title" />
      </a>
    </li>
  </xsl:template>

  <!-- java-script -->

  <xsl:template match="ui-accordion" mode="script">
    <xsl:call-template name="jquery-ui-script" />

    <script type="text/javascript">
      $(function(){
        $('#<xsl:value-of select="@id"/>').accordion({
          autoHeight: false
        });
      });
    </script>
    
    <xsl:apply-templates mode="script" />
  </xsl:template>

</xsl:stylesheet>
